<template>
  <div id="app">
    <loading v-model="isLoading"></loading>

    <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
      <router-view></router-view>
    </transition>

  </div>
</template>

<script>
  import { Tabbar, TabbarItem, ViewBox, XHeader, Loading } from 'vux'
  import { mapState, mapActions } from 'vuex'

  export default {
    name: 'app',
    components: {
      Tabbar,
      TabbarItem,
      ViewBox,
      XHeader,
      Loading,
    },
    data() {
      return {
      }
    },
    computed: {
      ...mapState({
        direction: state => state.nav.direction,
        isLoading: state => state.nav.isLoading,
      })
    },
    methods: {
      scrollTop() {
        this.$refs.viewBox.scrollTop(0)
      },
      ...mapActions([
        'updateDemoPosition'
      ])
    },
    mounted(){
    }
  }

</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/tap.less';
  body {
    background-color: #fbf9fe;
  }

  html,
  body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }

</style>
